<nz-modal
  [nzWidth]="570"
  [(nzVisible)]="showModal"
  [nzTitle]="detail ? $t('_edit') : $t('_add')"
  (nzOnCancel)="onClose()"
  (nzOnOk)="handleOk()"
  [nzOkLoading]="uploading || getting"
  [nzBodyStyle]="{ maxHeight: '70vh', overflowY: 'auto' }"
>
  <ng-container *nzModalContent>
    <div class="breadcrumb1" *ngIf="detail?.breadcrumb">
      <span *ngFor="let n of detail.breadcrumb; let idx = index"
        >{{ n }}
        <span class="arrow" *ngIf="idx !== detail.breadcrumb.length - 1"
          >/</span
        ></span
      >
    </div>

    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>{{
          $t('_webLink')
        }}</nz-form-label>
        <nz-form-control [nzSpan]="20" [nzErrorTip]="$t('_requiredLink')">
          <input formControlName="url" nz-input (blur)="onUrlBlur($event)" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>{{
          $t('_webName')
        }}</nz-form-label>
        <nz-form-control [nzSpan]="20" [nzErrorTip]="$t('_requiredName')">
          <input
            formControlName="title"
            nz-input
            [readonly]="getting"
            [placeholder]="getting ? $t('_pendingGet') : ''"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="isLogin">
        <nz-form-label [nzSpan]="4">{{ $t('_sort') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <input
            formControlName="index"
            nz-input
            type="number"
            placeholder="100000"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="isLogin">
        <nz-form-label [nzSpan]="4">{{ $t('_shortcut') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-switch class="mr-4" formControlName="top"></nz-switch>

          <nz-checkbox-group
            *ngIf="isTop"
            formControlName="topOptions"
          ></nz-checkbox-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="isLogin">
        <nz-form-label [nzSpan]="4">{{ $t('_onlyOwnVisible') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-switch formControlName="ownVisible"></nz-switch>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_score') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-rate formControlName="rate" nzAllowHalf></nz-rate>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="isLogin">
        <nz-form-label [nzSpan]="4">{{ $t('_iconAddr') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-input-group [nzPrefix]="prefixIcon" [nzSuffix]="suffixIconSearch">
            <input
              formControlName="icon"
              nz-input
              [readonly]="getting"
              [placeholder]="getting ? $t('_pendingGet') : ''"
            />
          </nz-input-group>

          <ng-template #prefixIcon>
            <app-logo [src]="iconUrl" [size]="25" *ngIf="iconUrl"></app-logo>
          </ng-template>
          <ng-template #suffixIconSearch>
            <i
              nz-icon
              nzType="loading"
              nzTheme="outline"
              *ngIf="uploading; else loading"
            ></i>
            <ng-template #loading>
              <app-upload (onChange)="onChangeFile($event)"></app-upload>
            </ng-template>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="!isLogin">
        <nz-form-label [nzSpan]="4">{{ $t('_iconAddr') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-input-group [nzPrefix]="prefixIcon">
            <input
              formControlName="icon"
              nz-input
              [readonly]="getting"
              [placeholder]="getting ? $t('_pendingGet') : ''"
            />
          </nz-input-group>

          <ng-template #prefixIcon>
            <app-logo [src]="iconUrl" [size]="25" *ngIf="iconUrl"></app-logo>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_webDesc') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <textarea
            formControlName="desc"
            nz-input
            [nzAutosize]="{ minRows: 3, maxRows: 5 }"
            [readonly]="getting"
            [placeholder]="getting ? $t('_pendingGet') : ''"
            class="dark-scrollbar"
          >
          </textarea>
        </nz-form-control>
      </nz-form-item>

      <!-- more url -->
      <div formArrayName="urlArr">
        <nz-form-item
          *ngFor="let n of urlArray.controls; let idx = index"
          [formGroupName]="idx"
        >
          <nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
          <nz-form-control [nzSpan]="20">
            <nz-input-group
              [nzAddOnBefore]="addOnBeforeTemplate"
              [nzAddOnAfter]="addOnAfterTemplate"
            >
              <input
                formControlName="url"
                type="text"
                nz-input
                [placeholder]="$t('_tagPlaceholder')"
              />
            </nz-input-group>
            <ng-template #addOnBeforeTemplate>
              <nz-select style="width: 100px" formControlName="id">
                <nz-option
                  *ngFor="let tag of tagList"
                  [nzLabel]="tag.name"
                  [nzValue]="tag.id"
                >
                </nz-option>
              </nz-select>
            </ng-template>
            <ng-template #addOnAfterTemplate>
              <i
                class="cursor-pointer"
                nz-icon
                nzType="minus"
                nzTheme="outline"
                (click)="lessMoreUrl(idx)"
              >
              </i>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <nz-form-item *ngIf="tagList.length > 0">
        <nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
        <nz-form-control [nzSpan]="20">
          <button nz-button nzType="default" nzBlock (click)="addMoreUrl()">
            <i nz-icon nzType="plus"></i>{{ $t('_continueAdd') }}
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>
